<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:include="include :: header"></head>

<body>
<!--<input id="text" type="text" value="" style="width:80%"/><br/>-->
<div id="qrcode_parent">
    <center>
        <div id="qrcode" style="margin-top: 10%"></div>
        <div style="margin-top: 10%">
            <a href="/view/video">
                <button type="button" class="layui-btn layui-btn-normal">看图片看视频</button>
            </a>
            <a href="/view/video?videoB=videoB">
                <button type="button" class="layui-btn layui-btn-normal">另一种显示</button>
            </a>
        </div>
    </center>
</div>
<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<script type="text/javascript">
    var QRCodeUrl = "[[${qRCodeUrl}]]";

    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 300,
        height: 300
    });

    function makeCode() {
        // var elText = document.getElementById("text");
        // if (!elText.value) {
        //     alert("Input a text");
        //     elText.focus();
        //     return;
        // }

        qrcode.makeCode(QRCodeUrl);
    }

    makeCode();

    $("#text").on("blur", function () {
        makeCode();
    }).on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });
</script>

<style>
    #qrcode_parent {
        margin: 0 auto;
        width: 500px;
        height: 500px;
    }
</style>
</body>
</html>
